%nav {
  height: 135px;
  width: 30%;
  min-width: 350px;
  background-color: #409fe5;
  border-radius: 5px;
  cursor: pointer;
  transition: all .1s;

  .nav-left {
    height: 135px;
    background-image: url('./../../assets/images/dashboard/home_icon_xiangmu.png');
    background-repeat: no-repeat;
    background-position: right;
  }

  .nav-right {
    height: 135px;
    line-height: 145px;
    text-align: left;
    color: white;
    font-size: 24px;
  }

  &:hover {
    box-shadow: 0px 0px 8px #666666;
  }
}

%echarts {
  height: 50%;
  min-height: 250px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0px 0px 8px #ddd;

  .echarts-top {
    height: 40px;
    line-height: 40px;
    padding: 0px 20px;
    border-bottom: 1px solid #cccccc;

    .echarts-top-left {
      float: left;
    }

    .echarts-top-right {
      float: right;
    }
  }
}

.dashboard-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 0px;

  .container {
    width: 90%;
    min-width: 1500px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .container-left {
      width: calc(100% - 385px);
      height: 100%;

      .head {
        width: 100%;
        height: 140px;
        padding-right: 20px;

        .nav-lists {
          @extend %nav;
        }
      }

      .content {
        height: calc(100% - 160px);
        padding-top: 20px;

        .body-left {
          width: calc(100% - 20px);
          height: 100%;

          .echartsTop {
            @extend %echarts;
          }

          .echartsBottom {
            margin-top: 20px;
            @extend %echarts;
          }

        }
      }

    }

    .container-right {
      width: 385px;
      height: 100%;

      .notice {
        width: 100%;
        height: 100%;
        box-shadow: 0px 0px 8px #ddd;
        background-color: white;
        border-radius: 5px;

        .notice-head {
          height: 40px;
          line-height: 40px;
          padding: 0px 20px;
          border-bottom: 1px solid #cccccc;

          .notice-left {
            float: left;
          }

          .notice-right {
            float: right;
          }
        }

        .notice-body {
          height: calc(100% - 60px);
          padding: 0px 20px;

          .notice-lists {
            height: 70px;
            cursor: pointer;
            border-bottom: 1px solid #cccccc;
            transition: all .3s;

            &:hover {
              background-color: #a4d6fa17;
            }

            .notice-lists-left {
              float: left;

              .circular {
                width: 40px;
                height: 40px;
                line-height: 46px;
                text-align: center;
                border-radius: 40px;
                margin-top: 15px;
                // background-color: #ee3b3b;
                background-image: url('./../../assets/images/nav/icon_news_nor.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;

                .icon {
                  font-size: 20px;
                  color: white;
                }
              }
            }

            .notice-lists-right {
              float: left;
              margin-left: 20px;

              .notice-info {
                height: 35px;
                width: 250px;
                overflow: hidden;
                line-height: 50px;
              }

              .notice-time {
                height: 35px;
                line-height: 35px;
                color: #b5b5b5;
              }

            }
          }
        }
      }
    }

    // .head {
    //   width: 100%;
    //   height: 140px;
    //   display: flex;
    //   justify-content: left;
    //   align-items: center;

    //   .nav-first {
    //     @extend %nav;
    //   }

    //   .nav-lists {
    //     @extend %nav;
    //     margin-left: 2.5%;
    //   }
    // }

    // .content {
    //   height: calc(100% - 140px);
    //   padding-top: 30px;
    //   display: flex;
    //   justify-content: left;
    //   align-content: center;

    //   .body-left {
    //     width: calc(100% - 385px);
    //     height: 100%;

    //     .echartsTop {
    //       @extend %echarts;
    //     }

    //     .echartsBottom {
    //       margin-top: 20px;
    //       @extend %echarts;
    //     }

    //   }

    //   .body-right {
    //     width: 385px;
    //     height: calc(100% + 20px);
    //     padding-left: 20px;

    //     .notice {
    //       width: 100%;
    //       height: 100%;
    //       box-shadow: 0px 0px 8px #ddd;
    //       background-color: white;
    //       border-radius: 5px;

    //       .notice-head {
    //         height: 40px;
    //         line-height: 40px;
    //         padding: 0px 20px;
    //         border-bottom: 1px solid #cccccc;

    //         .notice-left {
    //           float: left;
    //         }

    //         .notice-right {
    //           float: right;
    //         }
    //       }

    //       .notice-body {
    //         height: calc(100% - 60px);
    //         padding: 0px 20px;

    //         .notice-lists {
    //           height: 70px;
    //           cursor: pointer;
    //           border-bottom: 1px solid #cccccc;
    //           transition: all .3s;
    //           &:hover{
    //             background-color: #a4d6fa17;
    //           }

    //           .notice-lists-left {
    //             float: left;

    //             .circular {
    //               width: 40px;
    //               height: 40px;
    //               line-height: 46px;
    //               text-align: center;
    //               border-radius: 40px;
    //               margin-top: 15px;
    //               // background-color: #ee3b3b;
    //               background-image: url('./../../assets/images/nav/icon_news_nor.png');
    //               background-repeat: no-repeat;
    //               background-size: 100% 100%;

    //               .icon {
    //                 font-size: 20px;
    //                 color: white;
    //               }
    //             }
    //           }

    //           .notice-lists-right {
    //             float: left;
    //             margin-left: 20px;

    //             .notice-info {
    //               height: 35px;
    //               width: 250px;
    //               overflow: hidden;
    //               line-height: 50px;
    //             }

    //             .notice-time {
    //               height: 35px;
    //               line-height: 35px;
    //               color: #b5b5b5;
    //             }

    //           }
    //         }
    //       }
    //     }
    //   }
    // }
  }
}

// 公告详情页弹出框
.model {
  .title {
    height: 70px;
    line-height: 50px;
    font-size: 18px;
  }

  .head {
    height: 40px;
  }

  .content {
    width: 617px;
    text-indent: 2em;
  }
}
